<template>
    <div id="activity" v-title="title">
        <div class="title2" @click="back()">
            <i class="iconfont icon-fanhui"></i>
            会员中心
        </div>
        <!--Vip展示-->
        <div class="vip-box">
            <div class="vip-header" v-if="isVip">
                <div class="vip-header-left">
                    <img :src="this.$store.state.picHead + user.img"/>
                </div>
                <div class="vip-header-right">
                    <div class="name">{{user.name}}</div>
                    <div class="time">{{user.time | stampFormate2}}</div>
                </div>
            </div>
            <div class="vip-header" v-if="!isVip">
                <div class="vip-header-right2">
                    <p>开通VIP</p>
                    <p>立即畅享会员专属特权</p>
                </div>
            </div>
        </div>
        <!--会员套餐列表-->
        <div class="vipMenu">
            <div class="vipMenuTitle">会员套餐</div>
            <div class="vipMenuList" v-for="item in vipMenuList">
                <div class="vipMenuListLeft">{{item.time}}<span v-if='item.per == 1'>年</span><span v-if='item.per == 2'>个月</span></div>
                <div class="vipMenuListright" @click="buyHint(item.name,item.id,item.vipId)">{{item.price/100}}</div>
            </div>
        </div>
        <!--会员尊享-->
        <div class="vipText">
            <div class="vipTextTitle">会员套餐</div>
            <div class="vipTextList">
                <div class="vipTextListLeft"><img src="../../assets/image/VIP icon/vip_only.png"/></div>
                <div class="vipTextListright"><p>会员专享</p><p>参与会员用户专属内容</p></div>
            </div>
            <div class="vipTextList">
                <div class="vipTextListLeft"><img class="img2" src="../../assets/image/VIP icon/vip.png"/></div>
                <div class="vipTextListright"><p>尊贵身份标识</p><p>点亮会员专属标识</p></div>
            </div>
            <div class="vipTextList">
                <div class="vipTextListLeft"><img src="../../assets/image/VIP icon/vip_discounts.png"/></div>
                <div class="vipTextListright"><p>会员折扣</p><p>会员购买付费内容享会员价</p></div>
            </div>
            <div class="vipTextList">
                <div class="vipTextListLeft"><img class="img3" src="../../assets/image/VIP icon/vip_under_line.png"/></div>
                <div class="vipTextListright"><p>线下活动优先权</p><p>线下活动无需审核即可参与</p></div>
            </div>
        </div>
        <!--会员须知-->
        <div class="vipKnow">
            <div class="vipKnowTitle">会员须知</div>
            <div class="vipKnowText">1.会员属平台会员，适用于全平台；</div>
            <div class="vipKnowText">2.会员的购买及续期均按小时计算，从开通成功之时算起，多次购买按累加计算会员有效期；</div>
            <div class="vipKnowText">3.会员一经购买不可退费；</div>
            <div class="vipKnowText">4.最终解释权归运联网平台所有。</div>
        </div>
        <!--弹窗-->
        <div class="showBox" v-if="hint">
            <div class="showBoxText">
                您正在购买{{hintText}}，确定开通{{hintText}}？
            </div>
            <div class="bottom">
                <div class="bottomNo" @click="noBuy()">取消</div>
                <div class="bottomYes" @click="yesBuy()">购买</div>
            </div>
        </div>
        <!--遮罩-->
        <div class="hint" v-if="hint"></div>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {userService} from '../../service/userService'
    //eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiWmV1cyIsInVzZXJJZCI6IjViMzBhMTcxZmRlOTg4MmQzNmIyMmMwMyIsInBsYXRmb3JtIjoiV0FQSDUiLCJleHAiOjE1MzA1ODM2ODgsIm5iZiI6MTUyOTk3ODg4OH0.aUo0otS_xpPkI14CFgwNXtGXpVg4K5Myu_QG1Ez2bF0
    export default {
        data () {
            return {
                title: '会员中心',
                vipL:'',
                validVip:false,
                endtime:'',
                shopid:'',
                hint:false,
                hintText:'',
                vipMenuList:[],
                isVip:false,
                user:{
                    img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3997554263,1001275857&fm=27&gp=0.jpg',
                    name:'吴彦祖',
                    vip:'',
                    time:'2018-11-11',
                },
                level:[

                ],
                id:'',
                vipId:''
            }
        },
        mounted: function() {
            let that = this;
            document.title=that.text1
            that.updated()
//            that.pathId = window.localStorage.setItem('pathId',that.$store.state.shopId);
//            commonService.myCenter().then(function(res) {
//                let user = res.data.datas.user;
//                that.user = user;
//                that.validVip = user.myVip.vip;
//                if(user.myVip.vip){
//                    let vip = user.myVip.vipId;
//                    commonService.vipLevel(vip).then(function(res){
//                        that.vipL = res.data.datas.level;
//                        that.user.myVip.endTime = common.getFormatOfDate(that.user.myVip.endTime,'yyyy-MM-dd h:m:s')
//                        that.endtime = that.user.myVip.endTime;
//                        commonService.getvipLevel().then(function(res){
//                            that.level = res.data.datas;
//                            that.updated();
//                        });
//                    })
//                }else{
//                    commonService.getvipLevel().then(function(res){
//                        that.level = res.data.datas;
//                        that.updated();
//                    });
//                }
//            });
        },
        methods:{
            updated() {
                let that = this;
                userService.getVips().then(function(res){
                    if(res.data.success){
                        that.vipMenuList = res.data.datas.vipItems
                    }
                })
                userService.myCenter().then(function(res){
                    if(res.data.success){
                        that.user.name = res.data.datas.user.nickName;
                        that.user.img = res.data.datas.user.headImg;
                        that.user.time = res.data.datas.user.myVip.endTime;
                        let userId = res.data.datas.user.id
                        userService.isVip({userId:userId}).then(function(res){
                            if(res.data.success){
                                that.isVip = res.data.datas
                            }
                        })
                    }
                })
            },
            buy:function(id){
                let that = this
                window.localStorage.removeItem('checked');
                that.$router.push({name:'order',params:{type:'3',comNo:id}})
            },
            //返回
            back:function(){
                let that = this;
                that.$router.replace({name:'mycenter'});
            },
            //购买页面
            buyHint:function(time,id,vipId){
                console.log(time,id,vipId)
                let that = this;
                that.hint = true;
                that.hintText = time;
                that.id = id;
                that.vipId = vipId;

            },
            noBuy:function(){
                let that = this;
                that.hint = false;
            },
            yesBuy:function(){
                let that = this;
                userService.getVip({vipItemId:that.id,vipId:that.vipId}).then(function(res){
                    if(res.data.success){
                        let key = res.data.datas.key;
                        userService.vipSubmit({key:key}).then(function(res){
                            if(res.data.success){
                                console.log(res)
                                let orderNo = res.data.datas
                                window.localStorage.removeItem('checked');
                                that.$router.push({name:'pay',params:{type:'3',orderNo:orderNo}})
                            }
                        })
                    }
                })
            }
        },
    }
</script>

<style lang="less">
    @import url('../../assets/css/theme.less');
    #activity{
        background:#F9F9F9;
        .title2{
            width:100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            position:relative;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index:100;
            i{
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        .vip-box{
            width:100%;
            background:#F9F9F9;
            padding: 0.4rem;
            box-sizing: border-box;
            .vip-header{
                width:100%;
                height:2.23rem;
                border-radius: 10px;
                background:url("../../assets/image/VIP icon/vip_background.png")no-repeat;
                background-size:100% 100%;
                padding:0.37rem 0.53rem;
                box-sizing: border-box;
                .vip-header-left{
                    width:1.47rem;
                    height:1.47rem;
                    float:left;
                    overflow: hidden;
                    border-radius: 100%;
                    border:1px solid #A58455;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .vip-header-right{
                    float:left;
                    padding:0.11rem;
                    box-sizing: border-box;
                    margin-left:0.4rem;
                    .name{
                        font-size: 16px;
                        color: #FFFFFF;
                        margin-top:0.13rem;
                    }
                    .time{
                        font-size: 12px;
                        color: #EEEEEE;
                        margin-top:0.13rem;
                    }
                    p{
                        font-size:15px;
                        color:#FDE4A4;
                    }
                }
                .vip-header-right2{
                    padding:0.2rem 0.11rem;
                    box-sizing: border-box;
                    p{
                        font-size:15px;
                        color:#FDE4A4;
                    }
                }
            }
        }
        .vipMenu{
            width:100%;
            padding:0.4rem 0.4rem 0 0.4rem;
            box-sizing: border-box;
            background:#fff;
            font-size: 18px;
            color: #333333;
            .vipMenuList{
                width:100%;
                height:1.95rem;
                line-height:1.95rem;
                .vipMenuListLeft{
                    float:left;
                }
                .vipMenuListright{
                    width:1.7rem;
                    height:0.95rem;
                    line-height:0.95rem;
                    text-align: center;
                    background: #333333;
                    border-radius: 74px;
                    color:#FDE4A4;
                    font-size: 15px;
                    float:right;
                    margin-top: 0.53rem;
                }
            }
        }
        .vipText{
            margin-top:0.27rem;
            background:#fff;
            width:100%;
            padding:0.4rem 0.4rem 0 0.4rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            .vipTextTitle{
                font-size: 18px;
                color: #333333;
            }
            .vipTextList:nth-last-child(1){
                border:none;
            }
            .vipTextList{
                width:100%;
                height:2rem;
                border-bottom: 1px solid #EEEEEE;
                padding:0.5rem 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                .vipTextListLeft{
                    width:1.07rem;
                    height:1.07rem;
                    float:left;
                    img{
                        width:100%;
                        height:100%;
                    }
                    .img2{
                        width:100%;
                        height:0.86rem;
                        margin-top:0.15rem;
                    }
                    .img3{
                        width:100%;
                        height:1rem;
                        margin-top:0.1rem;
                    }
                }
                .vipTextListRight{
                    margin-left:0.45rem;
                    float:left;
                    p:nth-child(1){
                        font-size: 15px;
                        color: #333333;
                        line-height:0.67rem;
                    }
                    p:nth-child(2){
                        font-size: 13px;
                        color: #333333;
                    }
                }
            }
        }
        .vipKnow{
            margin-top:0.27rem;
            background:#fff;
            width:100%;
            padding:0.4rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            .vipKnowTitle{
                font-size: 18px;
                color: #333333;
                margin-bottom:0.2rem;
            }
            .vipKnowText{
                padding:0.2rem 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-size: 16px;
                color: #333333;
            }
        }
        .showBox{
            width:7.2rem;
            height:3.57rem;
            background:#fff;
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            z-index:100;
            border-radius: 10px;
            .showBoxText{
                width:100%;
                height:2.37rem;
                padding:0.53rem;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-size: 16px;
                color: #333333;
            }
            .bottom{
                width:100%;
                height:1.17rem;
                border-top:1px solid #eee;
                .bottomNo{
                    width:50%;
                    height:1.17rem;
                    line-height:1.17rem;
                    text-align: center;
                    font-size: 17px;
                    color: #666666;
                    float:left;
                }
                .bottomYes{
                    width:calc(50% - 1px);
                    height:1.17rem;
                    line-height:1.17rem;
                    text-align: center;
                    font-size: 17px;
                    color: #007AFF;
                    float:left;
                    border-left:1px solid #eee;
                }
            }
        }
        .hint{
            width:100%;
            height:100%;
            position: fixed;
            top:0;bottom:0;left:0;right:0;
            margin:auto;
            background: #333;
            opacity: 0.6;
            z-index:0;
        }
    }
</style>